<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 300px; overflow-y: hidden;" v-model="$props.parentData" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
      
    <el-button style="padding: 10px 0;" type="primary" @click="sendData">提交内容</el-button>
  </div>
</template>

<script lang="ts" setup name="Myeditor">

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {defineEmits,defineProps } from 'vue'

// defineProps(['parentData'])
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
let valueHtml = ref()

const emit = defineEmits(['message'])

const props = defineProps({
  parentData:String
})


// 模拟 ajax 异步获取内容
onMounted(() => {
   setTimeout(() => {
    valueHtml.value = props.parentData
  },1)
  //valueHtml.value = props.parentData
  //console.log(valueHtml.value);
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

function sendData() {
  const editor = editorRef.value
  //console.log(editor.getText());
  emit('message', editor.getText())
}

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}


const insertText = () => {
  const editor = editorRef.value // 获取 editor ，必须等待它渲染完之后
  if (editor == null) return
  editor.insertText('hello world') // 执行 editor API
}


// return {
//   editorRef,
//   valueHtml,
//   mode: 'default', // 或 'simple'
//   toolbarConfig,
//   editorConfig,
//   handleCreated
// }
</script>